<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>s</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
    <div class="layuimini-container" id="app">
        <div class="layuimini-main">
            <form class="layui-form" action="javascript:;" id="thisForm">
                <div class="layui-form-item">
                    <label class=" layui-form-label">选择区服：</label>
                    <div class="layui-input-block">
                            <input type="radio" name="game_area" v-for="(item,index) in services" :title="item.name" :data-index="index"
                                   lay-filter="game_area_radio" :value="item.server_id" :checked="index==0" />
                    </div>
                </div>
                <!-- game_areas -->
                <div class="layui-form-item">
                    <label class=" layui-form-label">角色id:<br>多个角色以英文 , 隔开</label>
                    <div class="layui-input-inline">
                        <textarea name="roleIdsStr" v-model="formData.roleIdsStr" class="layui-input" lay-verify="required" required="required"></textarea>
                        <button class="layui-btn layui-btn-warm layui-btn-sm" type="button" id="check-role-ids" style="margin-top:10px;">检测角色id</button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class=" layui-form-label">标题：</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="formData.title" class="layui-input" lay-verify="required" required="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述：</label>
                    <div class="layui-input-inline" style="width: 500px;">
                        <textarea v-model="formData.description" style="height:150px;" class="layui-input"></textarea>
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class=" layui-form-label">物品生成:</label>
                    <div class="layui-input-block">
                        <table id="table1">
                            <tbody>
                                <tr>
                                    <td>道具ID:</td>
                                    <td><input type="number" class="layui-input" :value="equip.id" required="required" placeholder="道具ID" v-on:change="equipIdChange(event)"/></td>
                                    <td>道具名:</td>
                                    <td><input type="text" class="layui-input layui-disabled" :value="equip.name" placeholder="" style="color: black !important;" readonly/></td>
                                    <td>绑定:</td>
                                    <td>
                                        <input type="radio" name="equip_bind" value="1" title="是" lay-filter="equip_bind" />
                                        <input type="radio" name="equip_bind" value="0" title="否" lay-filter="equip_bind" checked=""/>
                                    </td>
                                    <td>
                                        <select class="layui-select" lay-search="" lay-ignore="" lay-filter="equipSelectChange">
                                            <option value="">选择道具</option>
                                            <option :value="row.id" v-for="row in equipList">{{row.name}}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>精炼等级:</td>
                                    <td><input type="number" min="0" max="9" class="layui-input" placeholder="0~9" v-model="equip.level" /></td>
                                    <td>精炼孔数:</td>
                                    <td><input type="number" min="0" max="3" class="layui-input" placeholder="0~3" v-model="equip.holeNum"/></td>
                                    <td>数量:</td>
                                    <td><input type="number" min="1" max="14" class="layui-input" placeholder="1~14" v-model="equip.sendNum"/></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        属性
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="itemAddAttr('attribute')">添加</button>
                        <div class="select-list layui-clear">
                            <div class="left" v-for="(attr,index) in equip.attribute">
                                <div class="layui-inline" style="width:120px;">
                                    <select class="layui-select" lay-search="" :data-index="index" lay-ignore="" lay-filter="setAttributeValue">
                                        <option value="">选择属性</option>
                                        <option :value="row.id" v-for="row in equipAttrs">{{ row.id }}-{{ row.name }}</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:70px;margin-right: 45px;">
                                    <input type="number" class="layui-input" v-model="attr.value">
                                </div>
                                <i class="layui-icon del" v-on:click="equip.attribute.splice(index,1)"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        矿石
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="itemAddAttr('ore')">添加</button>
                        <div class="select-list layui-clear">
                            <div v-for="(attr,index) in equip.ore" class="left">
                                <div class="layui-inline" style="width:120px;">
                                    <select class="layui-select" lay-search="" :data-index="index" lay-ignore="" lay-filter="setOreValue">
                                        <option value="">选择矿石</option>
                                        <option :value="row.id" v-for="row in equipAttrs">{{ row.id }}-{{ row.name }}</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:70px;margin-right: 45px;">
                                    <input type="number" class="layui-input" v-model="attr.value">
                                </div>
                                <i class="layui-icon del" v-on:click="equip.ore.splice(index,1)"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        宝石
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="itemAddAttr('gem')">添加</button>
                        <div class="select-list layui-clear">
                            <div v-for="(attr,index) in equip.gem" class="left">
                                <div class="layui-inline" style="width:120px;">
                                    <select class="layui-select" lay-search="" :data-index="index" lay-ignore="" lay-filter="setGemValue">
                                        <option value="">选择宝石</option>
                                        <option :value="row.id" v-for="row in gemList">{{row.name}} {{row.title}}</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:70px;margin-right: 45px;">
                                    <input type="number" class="layui-input" v-model="attr.value">
                                </div>
                                <i class="layui-icon del" v-on:click="equip.gem.splice(index,1)"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        魂魄魂晶属性
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="soulAttrSet()">设置</button>
                        <div class="select-list">
                            {{equip.soulAttr? JSON.stringify(equip.soulAttr) : ''}}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        精灵球属性
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="petAttrSet()">设置</button>
                        <div class="select-list">
                            {{equip.petAttr? JSON.stringify(equip.petAttr) : ''}}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        仙魂珠属性
                    </label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="fsbAttrSet()">设置</button>
                        <div class="select-list">
                            {{equip.fsbAttr? JSON.stringify(equip.fsbAttr) : ''}}
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline clearfix">
                        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm left" v-on:click="commitItem()">生成</button>
                        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm left" id="submit">
                            保存记录
                        </button>
                        <span class="layui-form-mid layui-word-aux left">&nbsp;&nbsp;保存记录待审核</span>
                    </div>
                </div>
                <div id="showItemsBox">
                    <p style="font-weight: bold;">物品预览: </p>
                    <div v-for="(item,index) in formData.equipSendItems"> <!--  { equipId, equipLevel,equipBind,holeNum,sendNum,attribute:[],gem:[],ore:[],} -->
                        <span>
                            {{item.equipId}}:{{getEquipNameById(item.equipId)}}
                            &nbsp;&nbsp;精炼等级:{{item.equipLevel}}
                            &nbsp;&nbsp;绑定:{{item.equipBind?'是':'否'}}
                            &nbsp;&nbsp;孔数:{{item.holeNum}}
                            &nbsp;&nbsp;数量: {{item.sendNum}}

                        </span>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" v-on:click="formData.equipSendItems.splice(index,1)">删除</button>
                        <div style="padding-left: 2em;" class="attr-box">
                            <div>
                                属性: <span v-for="item1 in item.attribute">&nbsp;&nbsp;{{getAttrNameById(item1.id)}}:{{item1.value}}</span>{{item.attribute.length==0 ?'无':''}}
                            </div>
                            <div>
                                矿石: <span v-for="item1 in item.ore">&nbsp;&nbsp;{{getAttrNameById(item1.id)}}:{{item1.value}}</span>{{item.ore.length==0 ?'无':''}}
                            </div>
                            <div>
                                宝石: <span v-for="item1 in item.gem">&nbsp;&nbsp;{{getGemNameById(item1.id)}}:{{item1.value}}</span>{{item.gem.length==0 ?'无':''}}
                            </div>
                            <div>
                                仙魂珠: '仙魂珠ID'{{ item.fsbAttr ? getFsbIdText(item.fsbAttr) : '无' }} || '仙魂珠经验'{{ item.fsbAttr ? getFsbCurrExpText(item.fsbAttr) : '无' }}
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    var services = JSON.parse(localStorage.getItem('services'))
    var _this = null;
    function soulAttrSetCallback(formData){
        _this.equip.soulAttr = formData
    }
    function petAttrSetCallback(formData){
        _this.equip.petAttr = formData
    }
    function fsbAttrSetCallback(formData){
        _this.equip.fsbAttr = formData
    }
    layui.use(['laydate','form','laytpl'], function () {
        var laydate = layui.laydate,form = layui.form,$ = layui.$,laytpl=layui.laytpl;
        new Vue({
            el:"#app",
            data:{
                services:services,
                equipList:getEnum('equip'),
                equipAttrs:getEnum('equipAttr'),
                gemList:getEnum('gemList'),
                itemAttributes:[], //每个物品的属性
                equip:{ //单个物品
                    id:null,
                    name:"",
                    bind:0,
                    level:0,
                    holeNum:0,
                    sendNum:1,
                    attribute:[], //属性 {Type:'',Value:''}
                    ore:[], //矿石 {Type:'',Value:''}
                    gem:[], //宝石 {id,Type,name},
                    soulAttr:null,//魂魄魂晶属性
                    petAttr:null,//精灵球属性
                    fsbAttr:null,//仙魂珠属性
                },
                formData:{
                    gameArea:null,
                    roleIdsStr:"",
                    title:"系统邮件",
                    description:"系统邮件",
                    equipSendItems:[], // { equipId, equipLevel,equipBind,holeNum,sendNum,attribute:[],ore:[],gem:[]}
                }
            },
            created(){
                _this = this;
                _this.formData.gameArea = _this.services[0].server_id //默认区服
            },

            methods:{

                getFsbIdText(fsbAttr) {
                    return fsbAttr && fsbAttr.FsbId ? fsbAttr.FsbId : '无';
                },
                getFsbCurrExpText(fsbAttr) {
                    return fsbAttr && fsbAttr.FsbCurrExp ? fsbAttr.FsbCurrExp : '无';
                },
                soulAttrSet(){
                    layer.open({
                        title: '设置魂魄魂晶属性',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['800px', '600px'],
                        content: 'soulAttrSet.html',
                    });
                },
                petAttrSet(){
                    layer.open({
                        title: '设置精灵球属性',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['800px', '600px'],
                        content: 'petAttrSet.html',
                    });
                },
                fsbAttrSet(){
                    layer.open({
                        title: '设置仙魂珠属性',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['800px', '600px'],
                        content: 'fsbAttrSet.html',
                    });
                },
                getEquipNameById:function(id){
                    for(var k in this.equipList){
                        var v = this.equipList[k];
                        if (v.id == id){
                            return v.name;
                        }
                    }
                    return '无此道具';
                },
                getAttrNameById:function(id){
                    for(var k in this.equipAttrs){
                        var v = this.equipAttrs[k];
                        if (v.id == id){
                            return v.name;
                        }
                    }
                    return '无';
                },
                getGemNameById:function(id){
                    for(var k in this.gemList){
                        var v = this.gemList[k];
                        if (v.id == id){
                            return v.name;
                        }
                    }
                    return '无';
                },
                itemAddAttr:function(key){ // key contains:  attribute gem , ore
                    var _this = this;
                    var array = _this.equip[key];
                    var name = '';
                    if (key==='attribute') name='属性'
                    if (key==='gem') name='宝石'
                    if (key==='ore') name='矿石'
                    if (array.length >=3 ) {
                        layer.msg(name+'最多只能三行',{icon:2})
                        return;
                    }
                    array.push({
                        id:null,
                        value:'',
                    });
                },
                equipIdChange:function (e) {
                    var selectId = parseInt(e.target.value);
                    this.equip.id = selectId;
                    this.equip.name = this.getEquipNameById(selectId);
                },
                commitItem:function () {

                    var _this = this;

                    var itemAllNum = 0;
                    for(var k in _this.formData.equipSendItems){
                        var v = _this.formData.equipSendItems[k];
                        itemAllNum += parseInt(v.sendNum);
                    }

                    var num=  parseInt(itemAllNum) + parseInt(_this.equip.sendNum)
                    console.log('num',num)

                    if (num >14 ){
                        layer.msg('物品总数量不能14个',{icon:2});return;
                    }
                    if (!_this.equip.id) {
                        layer.msg('请选择道具',{icon:2});return;
                    }
                    //验证数据是否选择
                    function checkDataIsAvailable(arr){
                        for(var k in arr){
                            if (!arr[k].id || arr[k].value===''){
                                return false;
                            }
                        }
                        return true;
                    }
                    if (!checkDataIsAvailable(_this.equip.attribute)
                        || !checkDataIsAvailable(_this.equip.gem)
                        || !checkDataIsAvailable(_this.equip.ore)){
                        layer.msg('属性/宝石/矿石,中有空数据',{icon:2});return;
                    }
                    console.log('当前输入的数量',_this.equip.sendNum)

                    for (let i = 0; i < _this.equip.sendNum; i++) {
                        _this.formData.equipSendItems.push({
                            equipId: _this.equip.id,
                            equipLevel: _this.equip.level,
                            equipBind: _this.equip.bind,
                            holeNum: _this.equip.holeNum,
                            sendNum: 1, // 每个装备实际数量为 1
                            attribute: _this.equip.attribute,
                            gem: _this.equip.gem,
                            ore: _this.equip.ore,
                            soulAttr: _this.equip.soulAttr,
                            petAttr: _this.equip.petAttr,
                            fsbAttr: _this.equip.fsbAttr
                        });
                    }
                    console.log('提交数据',_this.formData.equipSendItems)
                    _this.equip.attribute = []
                    _this.equip.gem = []
                    _this.equip.ore = []
                    _this.equip.soulAttr = null
                    _this.equip.petAttr = null
                    _this.equip.fsbAttr = null
                },
            },
            updated:function(){
                $('[lay-ignore]').removeAttr('lay-ignore');
                form.render();
            },
            mounted:function(){
                var _this = this;

                laydate.render({
                    elem: '#count-down',
                    type: 'datetime',
                    trigger: 'click'
                });

                $('body').on('click','#check-role-ids',function(){
                    var roleIdsStr = $('[name=roleIdsStr]').val();
                    if (!roleIdsStr) return;
                    $.get("/admin/gameRole/checkRoleExists",{roleIdsStr:roleIdsStr,gameArea:_this.formData.gameArea},function(res){
                        var notExistsIds = res.data.notExistsIds;
                        if (notExistsIds.length === 0){
                            layer.msg('全部检测成功',{icon:1})
                        } else {
                            layer.open({
                                title:"角色ID不存在:",
                                type:1,
                                shadeClose:true,
                                area:["500px","250px"],
                                content:"<div id='not-exists-ids'>"+notExistsIds.join(",")+"</div>",
                            })
                        }
                    })
                });

                $('[lay-ignore]').removeAttr('lay-ignore');
                form.on('select(equipSelectChange)',function(data){
                    var selectId = parseInt(data.value);
                    _this.equip.id = selectId;
                    _this.equip.name = _this.getEquipNameById(selectId);
                })

                form.on('radio(game_area_radio)',function (data) {
                    _this.formData.gameArea = data.value;
                })
                form.on('radio(equip_bind)',function(data){
                    _this.equip.bind = data.value;
                })
                form.on('select(setAttributeValue)',function(data){ //属性
                    var elem = data.elem;
                    var value = data.value;
                    var index = parseInt($(elem).attr('data-index'))
                    var row = _this.equip.attribute[index];
                    row.id = value;
                })
                form.on('select(setOreValue)',function(data){ //矿石
                    var elem = data.elem;
                    var value = data.value;
                    var index = parseInt($(elem).attr('data-index'))
                    var row = _this.equip.ore[index];
                    row.id = value;
                })
                form.on('select(setGemValue)',function(data){ //宝石
                    var elem = data.elem;
                    var value = data.value;
                    var index = parseInt($(elem).attr('data-index'))
                    var row = _this.equip.gem[index];
                    row.id = value;
                    for(var k in _this.gemList){
                        var v = _this.gemList[k];
                        if (v.id == value){
                            row.Type = v.Type;break;
                        }
                    }
                })
                $('body').on('submit','#thisForm',function(){
                    $('#submit').attr('disabled',true);
                    console.log('查看提交数据',_this.formData)
                    $.post("/admin/equipSend/add",_this.formData,function(res){
                        $('#submit').removeAttr('disabled');
                        if (res.code === 0){
                            layer.msg('操作成功',{icon:1,time:500},function(){
                                parent.location.reload();
                            })
                        }else {
                            layer.msg(res.msg,{icon:5})
                        }
                    })
                    return false;
                })
                form.render();
            }
        })
    });

</script>
<style>
    .layui-input-block{
        margin-left: 300px;
    }
    #not-exists-ids{
        padding:20px;
    }
    .layui-table{
        margin:0;
    }
    .layui-form-label{
        width:270px;
    }
    #table1 td{
        padding-right:15px;
    }
    #table1 tr td{
        padding-top:10px;
    }
    #thisForm{
        display: block;position: relative;z-index:1;
    }
    #showItemsBox {
        position: absolute;
        right: 0;
        top: 0;
        width: 498px;
        height: 301px;
        border: 1px solid #e0e0e0;
        z-index: 2;
        overflow-y: scroll;
        padding: 10px;
    }
    .select-list .left{
        position: relative;
    }
    .select-list .del{
        position: absolute;top:-5px;right:26px;cursor: pointer;z-index:10;
        color:white;background: red;border-radius: 2px;
    }
</style>